import React from 'react';

interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
  checked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  className?: string;
}

const Switch: React.FC<SwitchProps> = ({
  checked,
  onCheckedChange,
  className = '',
  ...props
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onCheckedChange?.(event.target.checked);
  };

  const baseClasses = 'peer sr-only';
  const classes = `${baseClasses} ${className}`;

  return (
    <div className="relative inline-flex items-center h-6 w-11 rounded-full bg-slate-200 dark:bg-slate-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-2 transition-colors">
      <input
        type="checkbox"
        checked={checked}
        onChange={handleChange}
        className={classes}
        {...props}
      />
      <span 
        className={`absolute left-0.5 right-5 h-5 w-5 rounded-full bg-white dark:bg-slate-800 transition-all duration-200 ease-in-out ${checked ? 'translate-x-5' : ''}`}
      />
    </div>
  );
};

export { Switch };